<template>
    <div>
        <content-head>
            <div class="project-head">
                <div class="left">
                    <div class="project-round">
                        <span></span>
                    </div>
                    <div class="project-detail">
                        <p>开发文档</p>
                        <p>高效从这里开始</p>
                    </div>
                </div>
            </div>
        </content-head>
        <div class="project-content">
            <div>
                <Menu>
                    <menu-child :menuList="menuList" :active="activeMenuId" @menu-click="menuClick"></menu-child>
                </Menu>
            </div>
            <div>
                <div>
                    {{content}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ContentHead from './project/contentHead';
    import TreeUtil from '../../treeUtil';
    import MenuChild from './menuChild';
    export default {
        data(){
            return {
                menuList: [],
                content: '',
                activeMenuId: ''
            };
        },
        props:{
            project: Object
        },
        components:{
            ContentHead,
            MenuChild
        },
        created(){
            this.$http.get('/manage/api/v1/directorys/getAll').then((res)=>{
                if (res.status === 200) {
                    this.menuList = TreeUtil.transformToTreeFormat(res.data.directorys,{
                        key: 'id',
                        parentId: 'pid',
                        childKey: 'child'
                    });
                }
            });
        },
        methods:{
            menuClick(menuId){
                this.$http.get('/manage/api/v1/contexts/directory/' + menuId).then((res)=>{
                    if (res.status === 200) {
                        this.activeMenuId = menuId;
                        this.content = res.data.context.content;
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .project-content {
        margin: 16px auto 0 auto;
        background: #fff;
        display: flex;
    }
</style>